<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="Probably the most complete UI kit out there. Multiple functionalities and controls added,  extended color palette and beautiful typography, designed as its own extended version of Bootstrap at  the highest level of quality.                             ">
    <meta name="author" content="Webpixels">
    <title>Boomerang UI Kit - Free Bootstrap Framework by Webpixels</title>
    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700,800|Roboto:400,500,700" rel="stylesheet">
    <!-- Plugins -->
    <link rel="stylesheet" href="../assets/vendor/animate/animate.min.css" type="text/css">
    <!-- Theme CSS -->
    <link type="text/css" href="../assets/css/theme.css" rel="stylesheet">
    <!-- Demo CSS - No need to use these in your project -->
    <link rel="stylesheet" href="../assets/vendor/jquery-scrollbar/css/jquery-scrollbar.css">
    <link type="text/css" href="../assets/vendor/highlight/css/highlight.min.css" rel="stylesheet">
    <link type="text/css" href="../assets/css/demo.css" rel="stylesheet">
  </head>
  <body>
    <main class="main">
      <aside class="sidebar" id="nav_docs">
        <div class="sidebar-brand">
          <h1 class="font-weight-400"><a href="../"><span class="font-weight-700">Boomerang</span> UI Kit</a></h1>
        </div>
        <div class="scrollbar-inner">
          <ul class="navigation pr-3">
            <li class="navigation-title">Getting started</li>
            <li class="navigation-item">
              <a href="introduction.html" class="navigation-link">Introduction</a>
            </li>
            <li class="navigation-item">
              <a href="file-structure.html" class="navigation-link">File structure</a>
            </li>
            <li class="navigation-item">
              <a href="plugins.html" class="navigation-link">Plugins</a>
            </li>
            <li class="navigation-item">
              <a href="customization.html" class="navigation-link">Customization</a>
            </li>
            <li class="navigation-item">
              <a href="update.html" class="navigation-link">Update</a>
            </li>
            <li class="navigation-title">Design elements</li>
            <li class="navigation-item">
              <a href="colors.html" class="navigation-link">Colors</a>
            </li>
            <li class="navigation-item">
              <a href="typography.html" class="navigation-link">Typography</a>
            </li>
            <li class="navigation-item">
              <a href="icons.html" class="navigation-link">Icons</a>
            </li>
            <li class="navigation-title">Components</li>
            <li class="navigation-item">
              <a href="alerts.html" class="navigation-link">Alerts</a>
            </li>
            <li class="navigation-item">
              <a href="avatars.html" class="navigation-link">Avatars</a>
            </li>
            <li class="navigation-item">
              <a href="badges.html" class="navigation-link">Badges</a>
            </li>
            <li class="navigation-item">
              <a href="buttons.html" class="navigation-link">Buttons</a>
            </li>
            <li class="navigation-item">
              <a href="cards.html" class="navigation-link">Cards</a>
            </li>
            <li class="navigation-item">
              <a href="dropdowns.html" class="navigation-link">Dropdowns</a>
            </li>
            <li class="navigation-item">
              <a href="forms.html" class="navigation-link">Forms</a>
            </li>
            <li class="navigation-item">
              <a href="modal.html" class="navigation-link">Modal</a>
            </li>
            <li class="navigation-item">
              <a href="navbar.html" class="navigation-link">Navbar</a>
            </li>
            <li class="navigation-item">
              <a href="navs.html" class="navigation-link">Navs</a>
            </li>
            <li class="navigation-item">
              <a href="pagination.html" class="navigation-link">Pagination</a>
            </li>
            <li class="navigation-item">
              <a href="progress.html" class="navigation-link">Progress</a>
            </li>
            <li class="navigation-item">
              <a href="tables.html" class="navigation-link">Tables</a>
            </li>
            <li class="navigation-item">
              <a href="tooltips.html" class="navigation-link">Tooltips</a>
            </li>
          </ul>
        </div>
      </aside>
      <section class="content">
        <div class="header">
          <div class="navigation-trigger d-xl-none" data-action="aside-open" data-target=".sidebar">
            <div class="navigation-trigger-inner">
              <i class="navigation-trigger-line"></i>
              <i class="navigation-trigger-line"></i>
              <i class="navigation-trigger-line"></i>
            </div>
          </div>
          <div class="header-brand d-xl-none">
            <h1><a href="index.html">Boomerang UI Kit</a></h1>
          </div>
          <div class="header-nav ml-auto">
            <ul class="nav align-items-center">
              <li class="nav-item d-none d-md-inline-block">
                <a class="nav-link pl-0 active" href="../">Go to UI Kit</a>
              </li>
              <li class="nav-item d-none d-md-inline-block">
                <a class="nav-link" href="../docs/changelog.html">Changelog</a>
              </li>
              <li class="nav-item ml-4">
                <a href="https://github.com/webpixels/boomerang-ui-kit/archive/master.zip" class="btn btn-sm btn-primary">Download Free</a>
              </li>
            </ul>
          </div>
        </div>
        <div class="content-inner content-docs">
          <div class="container">
            <div class="pt-3 pb-4 mb-4 border-bottom">
              <div class="row">
                <div class="col-lg-6">
                  <h2 class="heading h2 font-weight-bold">File structure</h2>
                  <p>Within this theme you’ll find the following directories and files, grouping common resources and providing both compiled and minified distribution files, as well as raw source files.</p>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-lg-9">
                <h3 id="contents">Contents</h3>
                <p>What’s great about Boomerang is that you have everything you need in one place. It is very simple and easy to understand. All styles, images, javascript and other third-party plugins are stored within the assets folder, while the page templates are stored within the pages folder.</p>
                <h3 id="page-templates">Page templates</h3>
                <p><i class="fas fa-folder text-primary mr-2"></i>
                  <strong>pages</strong> is where all HTML pages are stored. Use any of these to start building your website. Everything is exactly as see in the live preview.</p>
                <p>Each page is named after its purpose so it can be easy for you to find the one you need. You can open it directly in your browser or your favorite editor to modify its contents.</p>
                <h3 id="assets">Assets</h3>
                <p><i class="fas fa-folder text-primary mr-2"></i>
                  <strong>assets</strong> contains all of the assets that will be used in the html pages, from CSS and JS to images and third party plugins. Below we will explain more in detail what each one does.</p>
                <h3 id="scss">SCSS</h3>
                <p><i class="fas fa-folder text-primary mr-2"></i>
                  <strong>assets/scss</strong> contains all of raw source files that are used to create the final CSS that is included in the theme. The SCSS is structured as follows:</p>
                <ul>
                  <li><code>bootstrap</code> contains all the source files included in the official Bootstrap package (4.0.0). This way, you will use a single unified stylesheet that contains all styles. We will update it as long as Bootstrap releases new versions.</li>
                  <li><code>mixins</code> contains overriden or new mixins used for grouping CSS declarations for reuse throughout our theme.</li>
                  <li><code>utilities</code> contains all the source files responsable for spacing, fonts, colors and other quick modifier classes that can be used within our theme.</li>
                  <li><code>_variables.scss</code> contains all SCSS variables used to override default values that Bootstrap provides.</li>
                  <li><code>_custom.scss</code> is a file specially created for you, the user, in order to override SCSS variables and styles or add new ones.</li>
                  <li><code>theme.scss</code> unifies all the components, utilities and mixins that are compiled in a single file that will be used as a stylesheet within our theme.</li>
                </ul>
                <h3 id="css">CSS</h3>
                <p><i class="fas fa-folder text-primary mr-2"></i>
                  <strong>assets/css</strong> contains the minified and uncompressed CSS resulted from the SCSS files, including Bootstrap.</p>
                <ul>
                  <li><code>theme.css</code></li>
                  <li><code>theme.min.css</code></li>
                </ul>
                <h3 id="js">JS</h3>
                <p><i class="fas fa-folder text-primary mr-2"></i>
                  <strong>assets/js</strong> contains all of the assets referenced in the html pages.</p>
                <ul>
                  <li><code>bootstrap</code> contains all the javascript files included in the official Bootstrap package (4.0.0). We will update it as long as Bootstrap releases new versions.</li>
                  <li><code>theme.js</code> contains all the custom plugins and additional scripts included in Boomerang.</li>
                  <li><code>theme.min.js</code> is the minified version of theme.js that should be included in your website.</li>
                </ul>
                <h3 id="vendor">Vendor</h3>
                <p><i class="fas fa-folder text-primary mr-2"></i>
                  <strong>assets/vendor</strong> contains all of the third party plugins used in the entire project. You can see what we used in the <a href="plugins.html">dedicated page for plugins</a>.</p>
              </div>
              <div class="col-lg-3 d-none d-lg-inline-block">
                <div class="sidebar-sticky" data-stick-in-parent="true">
                  <ul class="section-nav">
                    <li class="toc-entry toc-h3"><a href="#contents">Contents</a></li>
                    <li class="toc-entry toc-h3"><a href="#page-templates">Page templates</a></li>
                    <li class="toc-entry toc-h3"><a href="#assets">Assets</a></li>
                    <li class="toc-entry toc-h3"><a href="#scss">SCSS</a></li>
                    <li class="toc-entry toc-h3"><a href="#css">CSS</a></li>
                    <li class="toc-entry toc-h3"><a href="#js">JS</a></li>
                    <li class="toc-entry toc-h3"><a href="#vendor">Vendor</a></li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
        <footer class="px-3 footer bg-white">
          <div class="container ">
            <div class="row align-items-center py-3 border-top">
              <div class="col-lg-6 text-center text-lg-left mb-2 mb-lg-0">
                &copy; 2018 <a href="https://webpixels.io/" target="_blank">Webpixels</a>. All rights reserved.
              </div>
              <div class="col-lg-6 text-center text-lg-right">
                <ul class="nav justify-content-center justify-content-lg-end">
                  <li class="nav-item">
                    <a class="nav-link active" href="https://instagram.com/webpixelsofficial" target="_blank"><i class="fab fa-instagram"></i></a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="https://facebook.com/webpixels" target="_blank"><i class="fab fa-facebook"></i></a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="https://github.com/webpixels" target="_blank"><i class="fab fa-github"></i></a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="https://dribbble.com/webpixels" target="_blank"><i class="fab fa-dribbble"></i></a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </footer>
      </section>
    </main>
    <!-- Core -->
    <script src="../assets/vendor/jquery/jquery.min.js"></script>
    <script src="../assets/vendor/popper/popper.min.js"></script>
    <script src="../assets/js/bootstrap/bootstrap.min.js"></script>
    <!-- FontAwesome 5 -->
    <script src="../assets/vendor/fontawesome/js/fontawesome-all.min.js" defer></script>
    <!-- Scripts used only for this demo only - Remove these in your project -->
    <script src="../assets/vendor/jquery-scrollbar/js/jquery-scrollbar.min.js"></script>
    <script src="../assets/vendor/jquery-scrollLock/jquery-scrollLock.min.js"></script>
    <script src="../assets/vendor/sticky-kit/sticky-kit.min.js"></script>
    <script src="../assets/vendor/highlight/js/highlight.min.js"></script>
    <script src="../assets/vendor/clipboard-js/clipboard.min.js"></script>
    <script src="../assets/vendor/holderjs/holder.min.js"></script>
    <script src="../assets/js/demo.js"></script>
    <!-- Theme JS -->
    <script src="../assets/js/theme.js"></script>
  </body>
</html>